<template>
  <a-menu-item :key="routeChildren.path" @click.capture="handleClick">
      <span>
          <i :class="'ri-'+routeChildren.meta.icon" aria-hidden="true"></i>
      </span>
      <!-- <span>{{ routeChildren.meta.title }}</span> -->
      <span>{{routeChildren.meta.title}}</span>
  </a-menu-item>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import {isExternal} from '/@/utils/validate'
import { mapGetters } from 'vuex';
export default defineComponent({
  props: {
      routeChildren: {
          type: Object,
          default: () => null
      }
  },
  computed: {
      ... mapGetters ({
          collapsed: "setting/collapsed"
      }),
  },
  setup() {
    
  },
  methods: {
      handleClick() {
        console.log("routeChildren: ", this.routeChildren)
        const routePath = this.routeChildren.path
        console.log("routePath: ", routePath)
        const target = this.routeChildren.meta.target
        if (target === '_blank') {
          if (isExternal(routePath)) window.open(routePath)
          else if (this.$route.path !== routePath) window.open(routePath.href)
        } else {
          if (isExternal(routePath)) this.$route.push(routePath)
          else if (this.$route.path !== routePath) this.$router.push(routePath)
        }
      },
  }
});
</script>

